import React, { Component } from 'react';
import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
import { View, BackHandler, DeviceEventEmitter } from 'react-native';
import DeviceInfo from 'react-native-device-info';
import {
  Content,
  ListItem,
  Text,
  Left,
  Body,
  ActionSheet,
  Right,
  Badge,
} from 'native-base';
import { Storage } from '../utils';
import I18n from '../res/language';
import { SlidingHead } from '../components';
import theme from '../native-base-theme/variables';
import ZlstIcon from '../components/zlst-icons';
import * as messageService from '../services/message';
// const bgHeadImage = require('../../assets/images/bg_setting.png');

const BUTTONS = [
  I18n.t('page.account.options.cancel_account'),
  I18n.t('page.account.options.just_quit_app'),
  I18n.t('page.account.options.cancel'),
];
const CANCEL_INDEX = 2;

class Mine extends Component {
  static navigationOptions = {
    title: '账户信息',
    headerStyle: { backgroundColor: theme.toolbarDefaultBg, borderBottomWidth: 0, elevation: 0 },
    headerTintColor: '#FFFFFF',
    headerTitleStyle: {
      fontWeight: 'bold',
      fontSize: 20,
      flex: 1,
      textAlign: 'center',
    },
    headerBackImage: (
      <ZlstIcon
        name="fanhui"
        size={24}
        color="white"
      />
    ),
    headerRight: <View />,
  }

  constructor(props) {
    super(props);
    this.state = {
      name: '',
      duty: '',
      xingMing: '',
      badge: 0,
    };
  }

  componentDidMount() {
    this.setState({
      name: global.user.name,
      duty: global.user.organization.name,
      xingMing: global.user.staff.name,
    });
    DeviceEventEmitter.addListener('refreshBadgeEvent', this.checkMsg);
    this.checkMsg();
  }

  componentWillUnmount() {
    DeviceEventEmitter.removeAllListeners('refreshBadgeEvent');
  }

  setBadge(badge) {
    this.setState({ badge });
  }

  _onPress = (index) => {
    if (index === 2) {
      this._showQuitActionSheet();
    } else if (index === 0) {
      this.props.navigation.navigate({ routeName: 'PasswordReset' });
    } else if (index === 1) {
      this.props.navigation.navigate({ routeName: 'About' });
    } else if (index === 3) {
      this.setBadge(0);
      this.props.navigation.navigate({ routeName: 'PushList' });
    } else if (index === 4) {
      this.props.navigation.navigate({ routeName: 'Share' });
    }
  }

  _showQuitActionSheet = () => {
    ActionSheet.show(
      {
        options: BUTTONS,
        cancelButtonIndex: CANCEL_INDEX,
      },
      buttonIndex => {
        if (buttonIndex === 1) {
          BackHandler.exitApp();
        } else if (buttonIndex === 0) {
          this.logout();
        }
      },
    );
  }

  logout = async () => {
    await Storage.set('token.access', null);
    await Storage.set('password', '');
    this.props.navigation.navigate({ routeName: 'Login' });
  }

  checkMsg = async () => {
    const userCode = global.user.name;
    const { total } = await messageService.searchUpRead({ page: 1, userCode });
    if (total > 0) {
      this.setState({ badge: total });
    }
    // this.setState({ badge: 5 });
  }

  render() {
    return (
      <SlidingHead
        enabled={false}
        title={this.state.name}
        subtitle={`${this.state.duty}  ${this.state.xingMing}`}
      >
        <Content style={{ top: SlidingHead.HEIGHT, backgroundColor: theme.myPrimary }}>
          {/* <Separator noTopBorder /> */}
          <View style={{ backgroundColor: 'rgba(255,255,255,0.2)' }}>
            <ListItem icon onPress={() => this._onPress(3)}>
              <Left>
                <Icon name="email" size={26} color="white" />
              </Left>
              <Body style={{ borderBottomWidth: 0 }}>
                <Text style={{ fontSize: theme.myNormalFontSize, color: 'white' }}>消息</Text>
              </Body>
              {this.state.badge > 0 && (
                <Right style={{ borderBottomWidth: 0 }}>
                  <Badge danger>
                    <Text>{this.state.badge}</Text>
                  </Badge>
                </Right>
              )}
            </ListItem>
            <ListItem icon onPress={() => this._onPress(0)}>
              <Left>
                <Icon name="lock" size={26} color="white" />
              </Left>
              <Body style={{ borderBottomWidth: 0 }}>
                <Text style={{ fontSize: theme.myNormalFontSize, color: 'white' }}>{I18n.t('page.account.reset_password')}</Text>
              </Body>
            </ListItem>
            <ListItem icon onPress={() => this._onPress(1)}>
              <Left>
                <Icon name="bookmark" size={26} color="white" />
              </Left>
              <Body style={{ borderBottomWidth: 0 }}>
                <Text style={{ fontSize: theme.myNormalFontSize, color: 'white' }}>
                  当前版本{DeviceInfo.getVersion()}
                </Text>
              </Body>
            </ListItem>
            <ListItem icon onPress={() => this._onPress(4)}>
              <Left>
                <Icon name="link-variant" size={26} color="white" />
              </Left>
              <Body style={{ borderBottomWidth: 0 }}>
                <Text style={{ fontSize: theme.myNormalFontSize, color: 'white' }}>
                  分享
                </Text>
              </Body>
            </ListItem>
            <ListItem itemDivider style={{ backgroundColor: theme.myPrimary }} />
            <ListItem icon onPress={() => this._onPress(2)}>
              <Left>
                <Icon name="exit-to-app" size={26} color="white" />
              </Left>
              <Body style={{ borderBottomWidth: 0 }}>
                <Text style={{ fontSize: theme.myNormalFontSize, color: 'white' }}>{I18n.t('page.account.quit')}</Text>
              </Body>
            </ListItem>
          </View>
        </Content>
      </SlidingHead>
    );
  }
}

export default Mine;
